<template>
	<view class="classLayout pageBg">

		<custom-nav-bar title="分类"></custom-nav-bar>

		<view class="classift">
			<theme-item v-for="item in classifyList" :key="item._id" :item="item"></theme-item>
		</view>

		<!-- 简单提示：没有更多数据 -->
		<view v-if="hasMore === false" class="no-more">
			—— 已经到底了 ——
		</view>

	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		apiGetClassify
	} from "@/api/apis.js"
	import {
		onReachBottom
	} from "@dcloudio/uni-app"

	const params = {
		pageNum: 1,
		pageSize: 12
	}

	const classifyList = ref([])
	const hasMore = ref(true) // 是否还有更多数据

	const getClassify = async () => {
		const res = await apiGetClassify(params);
		const list = res.data?.list || []

		if (list.length > 0) {
			classifyList.value = [...classifyList.value, ...list]
			// 如果返回的数据条数小于 pageSize，说明已经是最后一页
			if (list.length < params.pageSize) {
				hasMore.value = false
			}
		} else {
			hasMore.value = false
		}
	}

	getClassify()

	onReachBottom(() => {
		if (hasMore.value) {
			params.pageNum++
			getClassify()
		}
	})
</script>

<style lang="scss" scoped>
	.classift {
		padding: 30rpx;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 15rpx
	}

	// 简单的“没有更多”提示
	.no-more {
		text-align: center;
		color: #999;
		font-size: 28rpx;
		padding: 30rpx 0;
	}
</style>